<!Doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts-X">
    <meta name="author" content="shenyi.914@gmail.com">
    <title>ECharts-X</title>

    <link rel="shortcut icon" href="../../img/favicon.png">

    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/article.css">
    <body>
        <header id="header">
            <h1><a href="../../index.html">ECharts-X</a></h1>
            <ul class="links">
                <li class="active">
                    <a href="./getting_started.html" target="_blank">Documentation</a>
                </li>
                <li><a href="../../example.html" target="_blank">Examples</a></li>
                <li><a href="https://github.com/ecomfe/echarts-x/" target="_blank">Github</a></li>
                <li><a href="http://echarts.baidu.com/" target="_blank">ECharts</a></li>
            </ul>
        </header>
        <main id="main">
            <nav id="nav" class="sidebar affix">
                <ul class="top">
                
                    
                    <li>
                    
                        <a href="getting_started.html">Getting Started</a>
                    </li>
                
                    
                    <li class="current">
                    
                        <a href="map3d.html">Map 3D</a>
                    </li>
                
                    
                    <li>
                    
                        <a href="markpoint.html">Mark Point</a>
                    </li>
                
                    
                    <li>
                    
                        <a href="markbar.html">Mark Bar</a>
                    </li>
                
                    
                    <li>
                    
                        <a href="markline.html">Mark Line</a>
                    </li>
                
                </ul>
            </nav>
            <article id="article">
                <h1>Map 3D</h1>
                <p><code>map3d</code>类型提供了3D地图的可视化，支持 ECharts 中<code>map</code>原有配置项的同时也加入了大量新的配置项。如果你之前使用过 ECharts 的<code>map</code>组件的话对下面的示例肯定不会陌生。</p>
<h2 id="simple-example">Simple Example</h2>
<pre><code class="lang-javascript">var option = {
    title: {
        show: true,
        text: &#39;Globe Visualization&#39;
    },
    series: [{
        name: &#39;globe&#39;,
        type: &#39;map3d&#39;,
        // 底图配置
        baseLayer: {
            backgroundColor: &#39;&#39;,
            backgroundImage: &#39;asset/earth.jpg&#39;,
        },
        // 表层（比如云层）配置
        surfaceLayers: [{
            type: &#39;texture&#39;,
            image: &#39;asset/clouds.png&#39;
        }],
        // 地图绘制配置成只绘制轮廓线和标签
        itemStyle: {
            normal: {
                label: {
                    show: true
                },
                borderWidth: 1,
                borderColor: &#39;yellow&#39;,
                areaStyle: {
                    color: &#39;rgba(0, 0, 0, 0)&#39;
                }
            }
        },
        // Empty data
        data: [{}]
    }]
}
</code></pre>
<h2 id="series-option">Series Option</h2>
<p>系列配置项, 通用部分详见 <a href="http://echarts.baidu.com/doc/doc.html#Series">ECharts</a></p>
<h3 id="maptype">mapType</h3>
<pre><code class="lang-javascript">mapType: &#39;world&#39;
</code></pre>
<p>同 ECharts 中 map 的 mapType, 默认是 <code>world</code>。支持但是不建议使用其它非世界地图的类型。</p>
<h3 id="maplocation">mapLocation</h3>
<pre><code class="lang-javascript">mapLocation: {
    x: 0,
    y: 0,
    width: &#39;100%&#39;,
    height: &#39;100%&#39;
}
</code></pre>
<p>同 ECharts 中 map 的 mapLocation，指定地球在视图中的位置。可以是绝对的像素坐标，也可以表示相对的百分比。</p>
<h3 id="background">background</h3>
<p>环境贴图，图片需要是一张全景图。示例 <a href="../../example/map3d_sun.html" target="_blank">map3d_sun</a>中就使用了下图作为星空背景。</p>
<p><img src="../../example/asset/starfield.jpg" width="700px" alt=""></p>
<h3 id="flat">flat</h3>
<pre><code class="lang-javascript">flat: false
</code></pre>
<p>是否使用平面地图。</p>
<h3 id="flatangle">flatAngle</h3>
<pre><code class="lang-javascript">flatAngle: 30
</code></pre>
<p>当开启平面地图模式的时候，该选项可以用来配置地图平面与屏幕平面的夹角。</p>
<h3 id="hoverable">hoverable</h3>
<pre><code class="lang-javascript">hoverable: false
</code></pre>
<h3 id="clickable">clickable</h3>
<pre><code class="lang-javascript">clickable: false
</code></pre>
<h3 id="selectedmode">selectedMode</h3>
<pre><code class="lang-javascript">selectedMode: false
</code></pre>
<p>区域选择模式，可以是多选<code>&#39;mutiple&#39;</code>，单选<code>&#39;single&#39;</code>，默认关闭</p>
<h3 id="baselayer">baseLayer</h3>
<p>底层基本地图的绘制配置。</p>
<h4 id="backgroundcolor">backgroundColor</h4>
<pre><code class="lang-javascript">backgroundColor: &#39;black&#39;
</code></pre>
<p>底图背景色</p>
<h4 id="backgroundimage">backgroundImage</h4>
<pre><code class="lang-javascript">backgroundImage: &#39;none&#39;
</code></pre>
<p>底图背景图片，覆盖在地图背景色上，可以是Image url，Image dom 或者 Canvas dom。</p>
<p><strong>注意</strong>：WebGL 是不允许图片跨域加载的，所以如果是跨域的图片可能会报 <code>tainted canvases may not be loaded</code> 的错误。</p>
<h4 id="quality">quality</h4>
<pre><code class="lang-javascript">quality: &#39;medium&#39;
</code></pre>
<p>底图贴图质量，即贴图的分辨率. 可选项：</p>
<p><code>&#39;high&#39;</code>(4096 x 4096)</p>
<p><code>&#39;medium&#39;</code>(2048 x 2048)</p>
<p><code>&#39;low&#39;</code>(1024 x 1024)</p>
<p>也可以直接配置数值分辨率比如<code>512</code>。</p>
<h4 id="heightimage">heightImage</h4>
<p>地表高度图，在启用光照后用来表现地表高度不同所产生的阴影。下面两张图分别是美国区域使用和未使用高度图的效果。</p>
<p><img src="../../img/article/heightmap_enable.png" alt="" />
<img src="../../img/article/heightmap_disable.png" alt="" /></p>
<h3 id="light">light</h3>
<p>光照配置，见示例 <a href="../../example/map3d_sun.html" target="_blank">map3d_sun</a></p>
<h4 id="show">show</h4>
<pre><code class="lang-javascript">show: false
</code></pre>
<p>是否展现光照。</p>
<h4 id="time">time</h4>
<p>设置时间，用来计算日照的位置和角度。默认使用系统时间。</p>
<h4 id="sunintensity">sunIntensity</h4>
<pre><code class="lang-javascript">sunIntensity: 1
</code></pre>
<p>日照强度, ECharts-X 使用 <a href="http://en.wikipedia.org/wiki/Lambertian_reflectance" target="_blank">lambert shading </a>表现日照产生的明暗面。</p>
<h4 id="ambientintensity">ambientIntensity</h4>
<pre><code class="lang-javascript">ambientIntensity: 0.1
</code></pre>
<p>环境光照强度，有时候为了更清楚的展现地球暗面的信息，需要把这个值调高。</p>
<h3 id="surfacelayers">surfaceLayers</h3>
<p>除了基于 ECharts map 的底层基本地图，map3d 可以分层绘制其它数据，比如风场的可视化。对于每一层有如下配置项:</p>
<h4 id="name">name</h4>
<p>层名称</p>
<h4 id="type">type</h4>
<p>层类型，可选项：</p>
<p><code>&#39;texture&#39;</code> 普通从外部加载的纹理，可以选择该层的纹理图片，比如开头示例中的云层。</p>
<p><code>&#39;particle&#39;</code> 粒子纹理，用来描绘向量场，例如风场和洋流。</p>
<h4 id="distance">distance</h4>
<p>层的高度</p>
<h4 id="image">image</h4>
<p>仅在<code>type:&#39;texture&#39;</code> 时有效，指定外部加载的图片，可以是 url 或者 dom。</p>
<h4 id="size">size</h4>
<pre><code class="lang-javascript">size: [2048, 1024]
</code></pre>
<p>层表面纹理的大小，默认为 2048 x 1024，注意部分用户环境的 GPU 不支持大于 2048 的纹理。</p>
<h4 id="particle">particle</h4>
<p>仅在<code>type:&#39;particle&#39;</code> 时有效，需要浏览器支持浮点纹理扩展，除了移动端因为硬件的限制，目前绝大部分的PC浏览器都是支持的。</p>
<p>particle 的配置项如下</p>
<table>
    <tr>
        <th>名称</th>
        <th>默认类型</th>
        <th>默认值</th>
        <th>描述</th>
    </tr>

    <tr>
        <td>vectorField</td>
        <td>Array | HTMLImageElement | HTMLCanvasElement</td>
        <td>无</td>
        <td>粒子的速度向量场。向量场有两种表示方法，可以是一个二维矩阵的数组，行表示从经度 -180 到经度 180，列表示从纬度 -90 到纬度 90，数组每一项为向量场的速度，可以是一个<code>[x, y]</code>数组，或者是一个<code>{x: x, y: y}</code>对象。x, y的值都需要归一化到 -1 到 1。除了二维矩阵，向量场也可以使用一个图片表示，例如下面 <a href="#fig-vector-field">Fig2</a> 就是一张风速的向量场图片。 </td>
    </tr>

    <tr>
        <td>color</td>
        <td>String</td>
        <td><code>&#39;#fff&#39;</code></td>
        <td>粒子颜色</td>
    </tr>
    <tr>
        <td>sizeScaling</td>
        <td>number</td>
        <td><code>1</code></td>
        <td>默认粒子大小从 0 到 1（取决于速度的大小），sizeScaling 描述粒子的缩放系数，例如 sizeScaling 值为 7 的时候粒子的大小就是 0 到 7。</td>
    </tr>
    <tr>
        <td>speedScaling</td>
        <td>number</td>
        <td>1</td>
        <td>速度缩放系数</td>
    </tr>
    <tr>
        <td>number</td>
        <td>number</td>
        <td><code>65536</code></td>
        <td>粒子数目，默认为<code>256 x 256</code>即<code>65536</code>。</td>
    </tr>
    <tr>
        <td>motionBlurFactor</td>
        <td>number</td>
        <td><code>0.99</code></td>
        <td>动态模糊系数，动态模糊效果会保存上一帧的图片乘上透明度系数即 motionBlurFactor 再与当前帧的图片混合。该系数越大则粒子运动的尾迹越长。</td>
    </tr>
</table>

<figure>
<a name="#fig-vector-field"></a>
<img src="../../img/article/vector_field.png" />
<figcaption>Fig2. Vector Field</figcaption>
</figure>

<p>具体的示例可以参见<a href="../../example/map3d_wind.html">风场的可视化示例</a></p>
<h3 id="roam">roam</h3>
<p>鼠标漫游配置</p>
<h4 id="autorotate">autoRotate</h4>
<pre><code class="lang-javascript">autoRotate: true
</code></pre>
<p>地球是否开启自动旋转，<code>flat: false</code>时有效。默认开启。</p>
<h4 id="autorotateafterstill">autoRotateAfterStill</h4>
<pre><code class="lang-javascript">autoRotate: 3
</code></pre>
<p>在鼠标未操作地球一段时间后会开启自动旋转，<code>autoRotate: true</code>时有效。默认为<code>3s</code>。</p>
<h4 id="focus">focus</h4>
<p>初始化镜头聚焦的区域名称，比如需要停留到中国上空时，可以配置为 <code>focus: &#39;China&#39;</code>。</p>
<h4 id="zoom">zoom</h4>
<pre><code class="lang-javascript">zoom: 1
</code></pre>
<p>初始化的缩放大小。</p>
<h4 id="minzoom">minZoom</h4>
<pre><code class="lang-javascript">minZoom: 0.5
</code></pre>
<p>最小缩放值</p>
<h4 id="maxzoom">maxZoom</h4>
<pre><code class="lang-javascript">maxZoom: 1.5
</code></pre>
<p>最大缩放值</p>
<h4 id="preserve">preserve</h4>
<pre><code class="lang-javascript">preserve: true
</code></pre>
<p>是否在每次 setOption 后保留之前的鼠标操作状态。</p>
<h2 id="-">事件</h2>
<h3 id="map3d_selected">MAP3D_SELECTED</h3>
<!-- ##Map 3D 中的分层 -->

            </article>
        </main>

        
<div style="clear:both;"></div>
<footer id="footer">
    <p class="maintained">Maintained by <a href="http://echarts.baidu.com/doc/about.html" target="_blank">ECharts</a> team</p>
    <ul class="links">
        <li><a target="_blank" href="http://echarts.baidu.com">ECharts</a></li>
        <li>·</li>
        <li><a target="_blank" href="http://tushuo.baidu.com/">Baidu 图说</a></li>
        <li>·</li>
        <li><a target="_blank" href="http://efe.baidu.com/">Baidu EFE</a></li>
        <li>·</li>
        <li><a target="_blank" href="http://weibo.com/echarts">Weibo</a></li>
    </ul>
</footer>

<script>
if (document.location.href.indexOf('local') == -1) {
    var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fb78830c9a5dad062d08b90b2bc0cf5da' type='text/javascript'%3E%3C/script%3E"));   
}
</script>

        <script src="../../lib/jquery.min.js"></script>
        <script src="../../lib/affix.js"></script>
        <script src="../../lib/prettify/prettify.js"></script>

        <link rel="stylesheet" href="../../lib/prettify/github.css">

        <script>
            $('#nav').affix({
                offset: {
                    top: 60,
                    bottom: 40
                }
            });

            $('pre').addClass('.prettyprint');

            prettyPrint();

            var $currentNav = $('#nav>ul>li.current');

            var $currentNavSub = $('<ul></ul>').appendTo($currentNav);
            $('#article h2, #article h3, #article h4').each(function (idx, $el) {
                var padding = 0;
                switch ($el.tagName.toLowerCase()) {
                    case 'h2':
                        padding = 20;
                        break;
                    case 'h3':
                        padding = 30;
                        break;
                    case 'h4':
                        padding = 40;
                        break;
                    case 'h5':
                        padding = 50;
                        break;
                }

                $el = $($el);
                var title = $el.html();
                $el.prepend('<a name="' + title + '"></a>');
                
                $('<li><a href="#' + title + '">' + title + '</a></li>')
                    .appendTo($currentNavSub)
                    .find('a').css('padding-left', padding + 'px');
            });
        </script>
    </body>
</head>
</html>